<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    年: <input type="text" id="year">   
    月: <input type="text" id="month">   
    日: <input type="text" id="day">
    <button id="btn">判断</button>
    <input type="text" id="result">   
    
</body>
<script>
    // 1.  年月日的输入判断
    // 需求:分别在年月日对应的输入框中输入对应的年月日,点击按钮判断,年月日输入是否合法,并将结果输出到结果框

    // 要求:
    // 年份: 1000-9999的整数
    // 月份: 1-12的整数
    // 日期:
    // 1 3 5 7 8 10 12   => 31(大月)
    // 4 6 9 11          => 30(小月)
    // 2   => 平年二月28  闰年2月29


</script>
<script>
    // 1. 获取元素
    var yearInp = document.getElementById("year");
    var monthInp = document.getElementById("month");
    var dayInp = document.getElementById("day");
    var btn = document.getElementById("btn");
    var resultInp = document.getElementById("result");

    console.log(yearInp,month,dayInp,btn,resultInp);

    //  此处代码在页面加载时执行 => 页面加载时 输入框还没有内容  => 取值为 "" 
    // var year = yearInp.value;
    // var month = monthInp.value;
    // var day = dayInp.value;
    // console.log(year,month,day);

    // 2. 绑定事件
    btn.onclick = function(){
        // debugger;
        //  3. 点击时  取值判断  => 取值字符串
        var year = yearInp.value;
        var month = monthInp.value*1;
        var day = dayInp.value*1;
        console.log(year,month,day);

        if(year >= 1000 && year <= 9999 && year % 1 == 0){
            console.log("year ok");
            if(month >= 1 && month <= 12 && month % 1 ==0){
                console.log("month ok");

                // 根据输入的月份  => 得到该月日期的最大值
                var maxDay = null;
                switch(month){
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        maxDay = 31;
                        break;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        maxDay = 30;
                        break;
                    case 2: 
                        // if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){  // 闰年
                        //     maxDay = 29;
                        // }else{
                        //     maxDay = 28;
                        // }
                        maxDay = year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ? 29 : 28;

                        break;
                    default:
                    resultInp.value = "出现了意料之外的情况";
                       break;
                }

                // 判断是否超出最大值
                if(day >= 1 && day <= maxDay && day % 1 == 0){
                    // 提前判断  该年的2月有多少天
                    var febDay = year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ? 29 : 28;

                    var sum = 0;
                    switch (month) {
                        case 1:
                            sum = day;
                            break;
                        case 2:
                            sum = 31 + day;
                            break;
                        case 3:
                            sum = 31 + febDay + day;
                            break;
                        case 4:
                            sum = 31 + febDay + 31 + day;
                            break;
                        case 5:
                            sum = 31 + febDay + 31 + 30 + day;
                            break;
                        case 6:
                            sum = 31 + febDay + 31 + 30 + 31 + day;
                            break;
                        case 7:
                            sum = 31 + febDay + 31 + 30 + 31 + 30 + day;
                            break;
                        case 8:
                            sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + day;
                            break;
                        case 9:
                            sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + day;
                            break;
                        case 10:
                            sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + day;
                            break;
                        case 11:
                            sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + day;
                            break;
                        case 12:
                            sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + 30 + day;
                            break;
                    }

                    resultInp.value = sum;
                }else{
                    resultInp.value = "日期范围有误";
                }


            }else{
                resultInp.value = "月份需要在1-12之!";
            }
        }else{
            resultInp.value = "年份需要在1000-9999之间";
        }
      

    }



</script>
</html>